<template>
  <div class="login">
    <el-form
      ref="loginForm"
      :model="loginList"
      :LoginRules="loginRules"
      label-width="auto"
    >
      <h2>欢迎登录</h2>
      <el-form-item label="账号：" prop="username">
        <el-input
          v-model="loginList.username"
          type="text"
          name="username"
          placeholder="请输入账号"
          clearable
        />
      </el-form-item>

      <el-form-item label="密码：" prop="password">

        <el-input
          v-model="loginList.password"
          type="password"
          name="password"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>

      <el-button type="primary" :loading="loading" @click="handleLogin"
        >点击登录</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { getLogin } from '@/api/api'
import { saveToken } from '@/utils/auth';
export default {
  name: "LoginIndex",
  data() {
    return {
      loginList: {
        username: "admin",
        password: "111111",
      },
      loading: false,
      loginRules: {},
    };
  },
  methods: {
    async handleLogin() {
        this.loading = true;
        const { username, password } = this.loginList;
        const res =await getLogin({ username, password });
        if (res.code ===20000 || res.code === 200) {
            saveToken(res.data.token);
            // console.log(res.data.token);
            this.$router.push('/home').then(() => {
        });
        this.$message.success('登录成功');
            this.loading = false;
        } else {
            this.$message.error('登录失败，请检查账号密码');
            this.loading = false;
        }
    }
   
  },
  computed: {
 
  },
  
};
</script>

<style scoped>
h2 {
  margin-bottom: 20px;
  color: #0a279b;
  font-size: 24px;
}

.login {
  text-align: center;
  border-radius: 10px;
  background-image: url("@/assets/1.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.el-form {
  padding: 20px;
  width: 300px;
  border-radius: 10px;
  /* background-color: #edfffa; */
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  width: 100%;
  margin-top: 20px;
}
</style>
